import EventBus from "../../EventBus"
import { mouseStatus,defaultStoreData  } from "../../lib/const"
import { deepCopy, swap, stringify,setMultipleKeys, getComponentListByKeys,ergodicList,updateComponentKey, getParentChildrenByKey,getComponentChildren,removeComponentByKeys, getComponentByKey, getOffsetByCanvas } from "../../lib/utils"
import { componentToPercentage, componentToPx } from "../../lib/unit"

export default function initKeyboardEvent(vm){
  function keyboardEvent(event) {
    const {
      key,
      code,
      ctrlKey
    } = event
    const lowCode = vm.$store.state.lowCode
    console.log(key, code, event)
    const isCtrl = ctrlKey
    switch (key) {
      case 'Delete': {
        EventBus.$emit("delectSelectedComponent")
        break
      }
        
      case 'c': {
        if (isCtrl) {
          copy(vm)
          stop(event)
        }
        break
      }
        
      case 'v': {
        if (isCtrl) {
          paste(vm)
          stop(event)
        }
        break
      }
        

      case 'x': {
        if (isCtrl) {
          shear(vm)
          stop(event)
        }
        break
      }

      case 'ArrowLeft': 
      case 'ArrowRight': 
      case 'ArrowUp':
      case 'ArrowDown': {
        move(vm, event)
        stop(event)
        break
      }
        
      default: 
        break
    }
  }
  console.log('initKeyboardEvent')
  
  document.removeEventListener("keydown", keyboardEvent)
  document.addEventListener("keydown", keyboardEvent)


}


const stop = (event) => {
  event.preventDefault()
  event.stopPropagation()
}

const copy = (vm) => {
  const {
    multipleKeys,
  } = vm
  if(multipleKeys.length > 0) {
    EventBus.$emit("copy")
  }
}

const paste = (vm) => {
  const {
    mousePosition,
    contextmenuPosition
  } = vm
  const {
    clipboardData,
    multipleKeys,
    canvasComponentList
  } = vm.$store.state.lowCode
  vm.contextmenuPosition = {
    ...contextmenuPosition,
    ...mousePosition
  }
  if(clipboardData.length > 0) {
    EventBus.$emit("paste")
  }
}

const shear = (vm) => {
  const {
    multipleKeys,
  } = vm
  if(multipleKeys.length > 0) {
    EventBus.$emit("shear")
  }
}
let moveTimer = null
const move = (vm, event) => {
  const {
    multipleKeys,
    canvasComponentList,
    selectedComponent
  } = vm
  const {
    key,
    repeat // 是否是长按
  } = event
  if(multipleKeys.length > 0) {
    const selectedComponents = getComponentListByKeys(canvasComponentList, multipleKeys)
    selectedComponents.forEach(component => {
      const {
        left,
        top
      } = component.style
      // 获取鼠标的偏移量
      let offsetX = 0
      let offsetY = 0

      // 位置变化系数
      // 单按时, 每次变化1px
      // 当是长按时, 变化 * 2
      const k = repeat ? 2 : 1
      switch (key) {
        case 'ArrowLeft': {
          offsetX = -1 * k
          break
        }
        case 'ArrowRight': {
          offsetX = 1 * k
          break
        }
        case 'ArrowUp': {
          offsetY = -1 * k
          break
        }
        case 'ArrowDown': {
          offsetY = 1 * k
          break
        }
      }
      
      // 获取新坐标
      const newLeft = left + offsetX
      const newTop = top + offsetY 
      const {
        left: pLeft,
        top: pTop
      } = componentToPercentage({
        ...component.style,
        left: newLeft,
        top: newTop
      })
      component.style.left = pLeft
      component.style.top = pTop
    })


   
    
    if(repeat === true) {
      moveTimer && clearTimeout(moveTimer)
      moveTimer = setTimeout(() => {
        vm.saveSnapshot({
          canvasComponentList
        })
      }, 300)
    }
    else {
      vm.saveSnapshot({
        canvasComponentList
      })
    }


  }
}